<template>
  <h1 :style="{ color: title.color }">{{ title.val }}</h1>
  <span>我的组件1</span>
  <p>num = {{ num }} <button @click="handleAdd">增加</button></p>
  <ul>
    <li v-for="item in list" :key="item.id">{{ item }}</li>
  </ul>
  <p>我的计算属性：{{ myComputed }}</p>
</template>

<script lang="ts">
import { computed, defineComponent, PropType, ref } from "vue";
import { IProduct, titleInfo } from '@/types'

export default defineComponent({
  props: {
    title: {
      type: Object as PropType<titleInfo>,
      require: true,
    },
  },
  setup() {
    let num = ref(1);
    const list = ref([] as IProduct[]);

    const handleAdd = (): void => { 
      list.value.push({
        id: num.value++,
        name: "张三" + num.value,
        price: +Math.random().toFixed(2) * 100,
      });
    };

    const myComputed = computed(() => {
      return num.value * 10
    });

    return {
      num,
      list,
      handleAdd,
      myComputed,
    };
  },
});
</script>

<style>
</style>